<template>
  <div>
    <search-form @setAwardId="setAwardId"/>
    <a-list
        :grid='{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }'
        style="margin: 0 -8px"
    >
      <a-card title="一等奖" style="margin: 16px 0">
        <a-list-item :key="item.project_info_id" v-for="item in projectList.slice(0,award.prize_1)"
                     style="padding: 0 16px">
          <a-card>
            <img slot="cover" src="https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png" height="154"/>
            <a-card-meta :title="item.project_name">
              <div slot="description">
                {{ item.project_tip }}
              </div>
              <div slot="description">
                平均得分：{{ item.average }}
              </div>
            </a-card-meta>
            <div class="content">
              <span>{{ item.project_time }}</span>
              <avatar-list>
                <avatar-list-item size="small" tips="曲丽丽"
                                  src="https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png"/>
                <avatar-list-item size="small" tips="董娜娜"
                                  src="https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png"/>
              </avatar-list>
            </div>
          </a-card>
        </a-list-item>
      </a-card>
      <a-card title="二等奖" style="margin: 16px 0">
        <a-list-item :key="item.project_info_id" v-for="item in projectList.slice(award.prize_1, award.prize_1 + award.prize_2)"
                     style="padding: 0 16px">
          <a-card>
            <img slot="cover" src="https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png" height="154"/>
            <a-card-meta :title="item.project_name">
              <div slot="description">
                {{ item.project_tip }}
              </div>
              <div slot="description">
                平均得分：{{ item.average }}
              </div>
            </a-card-meta>
            <div class="content">
              <span>{{ item.project_time }}</span>
              <avatar-list>
                <avatar-list-item size="small" tips="曲丽丽"
                                  src="https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png"/>
                <avatar-list-item size="small" tips="周星星"
                                  src="https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png"/>
                <avatar-list-item size="small" tips="董娜娜"
                                  src="https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png"/>
              </avatar-list>
            </div>
          </a-card>
        </a-list-item>
      </a-card>
      <a-card title="三等奖" style="margin: 16px 0">
        <a-list-item :key="item.project_info_id" v-for="item in projectList.slice(award.prize_1 + award.prize_2)"
                     style="padding: 0 16px">
          <a-card>
            <img slot="cover" src="https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png" height="154"/>
            <a-card-meta :title="item.project_name">
              <div slot="description">
                {{ item.project_tip }}
              </div>
              <div slot="description">
                平均得分：{{ item.average }}
              </div>
            </a-card-meta>
            <div class="content">
              <span>{{ item.project_time }}</span>
              <avatar-list>
                <avatar-list-item size="small" tips="曲丽丽"
                                  src="https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png"/>
                <avatar-list-item size="small" tips="周星星"
                                  src="https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png"/>
                <avatar-list-item size="small" tips="董娜娜"
                                  src="https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png"/>
              </avatar-list>
            </div>
          </a-card>
        </a-list-item>
      </a-card>
    </a-list>
  </div>
</template>

<script>
import SearchForm from './SearchForm'
import AvatarList from '../../../components/tool/AvatarList'
import Axios from 'axios'

const AvatarListItem = AvatarList.Item

export default {
  name: 'AwardWinning',
  components: {AvatarListItem, AvatarList, SearchForm},
  data() {
    return {
      url: this.$store.state.apiUrl + ':' + this.$store.state.apiPort,
      awards_id: 0,
      projectList: [],
      award: {}
    }
  },
  computed: {
    desc() {
      return this.award.awards_name + ' 获奖名单一览'
    }
  },
  methods: {
    // 子组件下拉框调用该方法传递奖项ID
    setAwardId(id) {
      console.log(id)
      this.awards_id = id
      // 获取奖项详情
      this.getAwardInfo()
      // 更新得奖列表
      this.getProjectList()
    },
    // 根据选择的奖项ID查询获奖项目
    getProjectList() {
      Axios.post(this.url + '/pxManagerSystem/getAwardWinningProjects', {
        awards_id: this.awards_id
      }).then(res => {
        if (res.data.state === 200) {
          this.projectList = res.data.data.projectWinInfolist
        } else {
          console.log(res.data)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 查询奖项详情
    getAwardInfo() {
      Axios.post(this.url + '/pxManagerSystem/selectAdwardsByAdardsId', {
        awards_id: this.awards_id
      }).then(res => {
        if (res.data.state === 200) {
          this.award = res.data.data.awardslist[0]
        } else {
          console.log(res.data)
        }
      }).catch(err => {
        console.log(err)
      })
    }
  },
  mounted() {

  }
}
</script>

<style lang="less" scoped>
.content {
  display: flex;
  margin-top: 16px;
  margin-bottom: -4px;
  line-height: 20px;
  height: 20px;

  & > span {
    color: @text-color-second;
    flex: 1;
    font-size: 12px;
  }

  .avatarList {
    flex: 0 1 auto;
  }
}
</style>
